<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <span v-if="options.pattern == 2 && options.disabled == true">
      {{ options.explain }}
    </span>
    <a-select
      v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      v-model="myValue"
      @change="helpChange"
      @click="helpClick"
      :disabled="options.disabled"
      :mode="options.multiple ? (options.tags ? 'tags' : 'multiple') : 'default'"
      :style="`width: ${options.width}; word-wrap:break-word;`"
      :placeholder="options.placeholder"
      :maxTagCount="parseInt(span / 4)"
      :showSearch="options.showSearch"
      :allowClear="options.clearable"
      :filter-option="filterOption"
    >
      <a-icon v-if="options.icon" slot="suffixIcon" :type="options.icon" />
      <a-select-option v-for="(item, index) in options.options" :key="index" :value="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
    <div
      v-else
      :class="{ formMaringBox: true, beyond_hiding: index == undefined ? false : true }"
      :style="`width: ${options.width}; word-wrap:break-word;`"
    >
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ defMyValue.join('，') }}</span>
        </template>
        <span
          class="copy_text"
          @click="copyClick()"
          @mouseenter="
            () => {
              isCopy = true
            }
          "
          @mouseleave="
            () => {
              isCopy = false
            }
          "
        >
          {{ defMyValue.join('，') }}
        </span>
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>

<script>
import { coreService } from '@/utils/formassembly/formservice.js'
import { copyValue } from '@/utils/formassembly/util.js'
import {
  serviceType
} from '@/utils/formassembly/servicetype.js'
export default {
  props: {
    required: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 19,
    },
    prop: {
      type: String,
    },
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    value: {},
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      myValue: this.value ? String(this.value).split(',') : [],
      defMyValue: [],
      isCopy: false, // 复制标签显示
    }
  },
  async created() {
    // console.log('下拉Value', this.value, ))
    // 如果开启了动态数据, 查枚举项渲染
    // console.log('this.options.dynamicKey', this.options.dynamicKey, this.$store.state.form.formData.dynamicDataList)
    // 调用自定配置服务
    if (this.options?.service) {
      this.customService(this.options?.service, this.myValue)
      return
    } else {
      // 手动初始化
      this.Manual()
    }
  },
  watch: {
    value(val) {
      // console.log('下拉输入监听', val, this.options.options)
      if (val) {
        this.myValue = []
        this.defMyValue = []
        let tempArr = String(val).split(',')
        this.options.options &&
          this.options.options.forEach((v) => {
            if (tempArr.includes(v.value)) {
              this.myValue.push(v.value)
              this.defMyValue.push(v.label)
            }
          })
      }
    },
  },
  methods: {
    // 审批端自定义服务
    async customService(service) {
      let result = await coreService(service, this.value, this.$route.params.applyid)
      if (result.data) {
        this.options.options = result.data
      }
      if (result.value) {
        this.defMyValue = result.value
      }
      // console.log('defMyValue', this.defMyValue)
      // console.log('自定义服务结果', result)
    },
    // 鼠标点击复制内容
    copyClick() {
      if (copyValue(this.defMyValue.join(','))) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 手动初始化
    async Manual() {
      if (this.options.dynamic && this.options.dynamicKey) {
        this.options.options = []
        await this.$store.getters.getEnumItem(this.options.dynamicKey).forEach((v) => {
          this.options.options.push({
            value: String(v.value),
            label: v.label,
          })
          if (this.myValue && this.myValue.includes(String(v.value))) {
            this.defMyValue.push(v.label)
          }
        })
      } else {
        this.options.options.forEach((v) => {
          if (this.myValue && this.myValue.includes(String(v.value))) {
            this.defMyValue.push(v.label)
          }
        })
      }
    },
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },
    async getValue(myValue) {
      await this.$store.getters.getEnumItem(this.options.dynamicKey).forEach((v) => {
        if (myValue == v.value) {
          return v.label
        }
      })
    },
    helpChange(value) {
      // 单选字符串, 多选数组
      // console.log('触发', value, this.myValue, this.options.multiple)
      if (this.options.multiple) {
        this.$listeners.updatedValueF(this.prop, value.join(','), this.index)
      } else {
        this.$listeners.updatedValueF(this.prop, value, this.index)
      }
      if (this.change) {
        this.$listeners.fHelp(this.change, this.index)
      }
    },
    helpClick() {
      if (this.click) {
        this.$listeners.fHelp(this.click, this.index)
      }
      // 点击时需要更新数据的服务
      if (this.options?.service && serviceType[this.options.service].isClick) {
        this.customService(this.options?.service, this.myValue)
        return
      }
    },
  },
}
</script>

